import React, { useState, useEffect } from 'react'
import { Table, Button, Modal, Tag, Tree } from 'antd'
import axios from 'axios'
import { DeleteOutlined, UnorderedListOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import Item from 'antd/lib/list/Item';
const { confirm } = Modal

export default function RoleList() {
  const [dataSource, setDataSource] = useState([])
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [rightList, setRightList] = useState([])
  const [currentRights, setCurrentRights] = useState([])
  const [currentId, setCurrentID] = useState(0)

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => <b>{id}</b>
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
      render: (roleName) => <Tag color="green">{roleName}</Tag>
    },
    {
      title: '操作',
      render: (Item) => <div>
        <Button shape="circle" danger><DeleteOutlined onClick={() => confirmMethod(Item)} /></Button>
        <div style={{ display: "inline-block", padding: "4px" }}></div>
        <Button shape="circle" type="primary"><UnorderedListOutlined onClick={() => {
          setIsModalVisible(true)
          // 再点击确定的时候去同步数据
          setCurrentRights(Item.rights)
          setCurrentID(Item.id)
        }} /></Button>
      </div>
    },
  ]
  // 角色列表请求
  useEffect(() => {
    axios.get("/roles").then(res => {
      setDataSource(res.data)
    })
  })

  // 树形控件请求
  useEffect(() => {
    axios.get("/rights?_embed=children").then(res => {
      setRightList(res.data)
    })
  }, [])

  // 删除弹窗
  const confirmMethod = (Item) => {
    confirm({
      title: '你确定要删除吗？',
      icon: <ExclamationCircleOutlined />,
      onOk() {
        // console.log('确定');
        deleteMethod(Item)
      },
      onCancel() {
        // console.log('取消');
      },
    });
  }

  // 删除操作
  const deleteMethod = (Item) => {
    // console.log(Item);
    // 删除的时候有层级结构，有与后端约定grade字段趣判断层级
    // filter传入一个回调函数，判断当前id是否等于要删除的id
    setDataSource(dataSource.filter(data => data.id !== Item.id))
    axios.delete(`/roles/${Item.id}`)
  }

  ////树形对话弹框
  // 取消按钮
  const handleOk = () => {
    setIsModalVisible(false)
    console.log(currentRights);
    // 去同步dataSource的数据
    setDataSource(dataSource.map(Item => {
      if (Item.id === currentId) {
        return {
          // 把item展开新的覆盖上去
          ...Item,
          rights: currentRights
        }
      }
      return Item
    }))
    // 补丁式更新path
    axios.patch(`/roles/${currentId}`, {
      rights: currentRights
    })

  }

  // 确定按钮
  const handleCancel = () => {
    setIsModalVisible(false);
  };

  // 树形控件的点击效果
  const onCheck = (checkedKeys) => {
    // console.log('onCheck', checkedKeys);
    setCurrentRights(checkedKeys.checked)
  };

  return (
    <div>
      <Table dataSource={dataSource} columns={columns}
        // 后端数据中没有字段key值，在table表格中可以使用rowKey自己指定一个key值
        rowKey={(Item) => Item.id}></Table>
      <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <Tree
          // 树形控件中的数据在后台要有对应的层级数据
          checkable
          onCheck={onCheck}
          checkedKeys={currentRights}
          // checkStrictly让父级不和子级关联
          checkStrictly={true}
          treeData={rightList}
        />
      </Modal>
    </div>
  )
}
